<template>
  <view class="banner h-[340rpx] bg-white translate-y-0" v-if="content.data.length && content.enabled">
    <swiper class="swiper h-full" :indicator-dots="content.data.length > 1" indicator-active-color="#4173ff" :autoplay="true">
      <swiper-item v-for="(item, index) in content.data" :key="index" @click="handleClick(item.link)">
        <u-image mode="aspectFit" width="100%" height="100%" :src="getImageUrl(item.image)" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import {navigateTo} from '@/utils/util'
export default {
  props: {
    content: {
      type: Object,
      default() {
        return {};
      }
    },
    styles: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    ...mapState(['config']),
  },
  methods: {
    handleClick(link) {
      navigateTo(link);
    },
    getImageUrl(url) {
      return url ? (this.config.domain + url) : ''
    },
  }
};
</script>

<style></style>
